<template>
  <div id="cryptos">
    <div class="exchangeHistory">
      <assets-head :title="$t('闪兑历史')" :back-func="backFunc" />
      <div class="px-20 mt-70">
        <div class="flex justify-between text-grey my-21 font-30">
          <span>{{ $t('从') }}</span>
          <span>{{ $t('至') }}</span>
        </div>
        <van-list v-model="loading" :finished="finished" :finished-text="$t('已经全部加载完毕')" @load="onLoad"
          :loading-text="$t('加载中...')" :offset="130">
          <ul class="flex flex-col">
            <li v-for="item in list" :key="item.id" class="flex cell-item flex-col">
              <p class="flex justify-between  font-35   font-14  textColor">
                <span>{{ item.amount }} {{ item.symbol.toUpperCase() }}</span>
                <span>{{ item.amount_to || '--' }} {{ item.symbol_to.toUpperCase() }}</span>
              </p>
              <p class="flex font-30 justify-between  text-grey mt-19 mb-45">
                <span>{{ item.create_time }}</span>
                <span class="flex items-center">
                  <i :class="{
                    'btnMain': item.state === 'submitted',
                    'bg-red': item.state === 'canceled',
                    'bg-green': item.state === 'created',
                  }" class="block  w-16 h-16 mr-10 rounded-full"></i>
                  {{ status[item.state] }}</span>
              </p>
            </li>
          </ul>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
import { List } from 'vant';
import { _exchangeHistory } from '@/service/fund.api';
import assetsHead from "@/components/Transform/assets-head/index.vue";
export default {
  components: {
    assetsHead,
    [List.name]: List
  },
  data() {
    return {
      loading: true,
      finished: false,
      pageSize: 20,
      page_no: 1,
      list: [],
      status: {
        submitted: this.$t('submitted'),
        canceled: this.$t('canceled'),
        created: this.$t('已完成')
      }
    }
  },
  created() {
    // this.onLoad()

  },
  methods: {
    backFunc() {
      if (this.$route.query.type / 1 === 1) {
        this.$router.push({
          path: '/cryptos/funds',
          query: {
            tab: 1
          }
        })
      } else if (this.$route.query.type / 1 === 0) {
        this.$router.push({
          path: '/cryptos/funds',
          query: {
            tab: 0
          }
        })
      } else {
        this.$router.go(-1)
      }
    },
    onLoad() { // 加载数据
      this.loading = true
      _exchangeHistory(this.page_no).then(data => {
        this.list = [...this.list, ...data]
        this.loading = false
        if (data.length < this.pageSize) {
          this.finished = true
        } else {
          this.page_no++
        }
      })
    },
    onClickLeft() {
      this.$router.go(-1);
    }
  }
}
</script>
<style lang="scss">
#cryptos {
  .exchangeHistory {
    width: 100%;
    box-sizing: border-box;
    font-size: 20px;

    .font-35 {
      font-size: 35px !important;
    }

    .font-30 {
      font-size: 30px !important;
    }

    .cell-item {
      margin-top: 30px;
    }
  }
}
</style>
